<template>
	<div class="style-craft">
		<div>
			<label>{{ $t('route.Order_management') }}</label>
			<div></div>
			<button><img /><label>{{ $t('route.Style_process') }}</label></button>
		</div>
		<div>
			<div>
				<el-radio-group @change='typeChange' v-model="type" size="large">
					<el-radio-button :label="$t('route.Cutting_Table')" />
					<el-radio-button :label="$t('route.Sewing')" />
					<el-radio-button :label="$t('route.quality')" />
					<el-radio-button :label="$t('route.Posterior_meatus')" />
				</el-radio-group>
				<el-radio-group v-if="type == $t('route.Sewing')" @change='inLineChange' v-model="inLine" size="large">
					<el-radio-button :label="$t('route.In_line')" />
					<el-radio-button :label="$t('route.Off_line')" />
				</el-radio-group>
			</div>

			<el-table :key="Math.random(100)" :row-style="{ height: 60 + 'px' }" :data="tableData" class="table" >
				<el-table-column :label="$t('route.Operation_No')" width="120" pro="code"  sortable prop="date" >
					<template #default="scope">
						<el-input v-model="scope.row.code" />
					</template>
				</el-table-column>
				<el-table-column :label="$t('route.Process_name')">
					<template #default="scope">
						<el-input style="width: 100%;" v-model="scope.row.name" />
					</template>
				</el-table-column>

				<el-table-column :label="$t('route.Normal_Hours')" width="200">
					<template #default="scope">
						<el-input oninput="value=value.replace(/[^0-9]/g,'')" v-model="scope.row.sewDur" />
					</template>
				</el-table-column>

				<el-table-column v-if="type == $t('route.Sewing')" width="200" :label="$t('route.location')">
					<template #default="scope">
						<el-select v-model="scope.row.inLine" :placeholder="$t('route.Please_select_a_location')">
							<el-option v-for="item in inLineOptions" :key="item.value" :label="item.label"
								:value="item.value">
							</el-option>
						</el-select>
					</template>
				</el-table-column>

				<el-table-column :label="$t('route.Required_vehicle_type')" width="200">
					<template #default="scope">
						<el-select filterable v-model="scope.row.deviceKind" :placeholder="$t('route.Please_select_the_type')">
							<el-option v-for="item in kindList" :key="item" :label="item" :value="item">
							</el-option>
						</el-select>
					</template>
				</el-table-column>

				<el-table-column fixed="right" :label="$t('route.operate')" width="195">
					<template #default="scope">
						<el-button type="text" @click="saveClick(scope.row)">
							{{ $t('route.preservation') }}
						</el-button>
						<el-button type="text" @click="deleteRow(scope.$index)">
							{{ $t('route.Delete') }}
						</el-button>
						<el-button  type="text"  @click.stop="moveUpward(scope.row,scope.$index)"  :disabled="scope.$index == 0">{{ $t('route.Move_up') }}</el-button>
                        <el-button  type="text"  @click.stop="moveDown(scope.row,scope.$index)"  :disabled="(scope.$index + 1) == tableData.length">{{ $t('route.Move_down') }}</el-button>
					
					</template>
				</el-table-column>
			</el-table>
			<el-button style="width: 100%" @click="addItemClick">{{ $t('route.new_column') }}</el-button>
		</div>


	</div>
</template>

<script>
import http from "../../js/http/http.js";
import api from "../../js/http/api.js";
import CommonUtils from "../../js/common/common-utils.js";
import Constant from '../../js/common/constant.js'
import i18n from "../../i18n";
export default {
	data() {
		return {
			styleId: 0,
			type: i18n.global.t('route.Cutting_Table'),
			inLine: i18n.global.t('route.In_line'),
			tableData: [{
				code: null,
				name: null,
				sewDur: 0,
				price: 0,
				rate: 0,
				inLine: false,
				deviceKind: null
			}],
			kindList: [i18n.global.t('route.nothing'), ...Constant.DEVICE_KIND],
			inLineOptions: [{
				value: true,
				label: i18n.global.t('route.In_line')
			}, {
				value: false,
				label: i18n.global.t('route.Off_line')
			}]
		};
  },
	methods: {
//上移按钮
    moveUpward(row, index) {
            if (index > 0) {
                let upData = this.tableData[index - 1];
                this.tableData.splice(index - 1, 1);
                this.tableData.splice(index, 0, upData);
            } else {
                this.$message({
                    message: i18n.global.t('route.This_is_already_the_first_item_Move_up_failed'),
                    type: 'warning'
                });
            }
        },
//下移按钮
	moveDown(row, index) {
			if ((index + 1) == this.tableData.length) {
				this.$message({
					message: i18n.global.t('route.This_is_the_last_item_move_down_failed'),
					type: 'warning'
				});
			} else {
				let downData = this.tableData[index + 1];
				this.tableData.splice(index + 1, 1);
				this.tableData.splice(index, 0, downData);
			}
			},
		typeChange() {
			this.getAllCraft();
		},
		inLineChange() {
			this.getAllCraft();
		},
		saveClick(craft) {
			if (CommonUtils.isEmpty(craft.code)) {
				this.$message.error(i18n.global.t('route.Operation_number_cannot_be_empty'));
				return;
			}
			if (CommonUtils.isEmpty(craft.name)) {
				this.$message.error(i18n.global.t('route.Operation_name_cannot_be_empty'));
				return;
			}
			if (CommonUtils.isEmpty(craft.deviceKind)) {
				this.$message.error(i18n.global.t('route.The_required_vehicle_type_cannot_be_empty'));
				return;
			}
			http.post(api.ADD_CRAFT, {
				id: craft.id,
				styleId: this.styleId,
				code: craft.code,
				name: craft.name,
				price: craft.price,
				sewDur: craft.sewDur,
				rate: craft.rate / 100,
				jxNum: craft.jxNum,
				tyjNum: craft.tyjNum,
				type: this.type,
				deviceKind: craft.deviceKind,
				inLine: craft.inLine,
			}, data => {
				this.$message.success(i18n.global.t('route.Saved_successfully'));
				this.getAllCraft();
			});

		},
		addItemClick() {
			this.tableData.push({
				code: null,
				name: null,
				sewDur: 0,
				price: 0,
				rate: 0,
				jxNum: 0,
				tyjNum: 0,
				deviceKind: null
			});
		},
		getAllCraft() {
			var inLine = null;
			if (this.type == i18n.global.t('route.Sewing')) {
				inLine = this.inLine == i18n.global.t('route.Off_line') ? false : true;
			}
			http.post(api.GET_ALL_CRAFT, {
				styleId: this.styleId,
				type: this.type,
				inLine: inLine
			}, data => {
				this.tableData = data.data;
			});
		},
		deleteCraft(craftId) {
			http.post(api.DELETE_CRAFT, {
				craftId: craftId,
			}, data => {
				this.getAllCraft();
			});
		},
		deleteRow(index) {
			if (this.tableData[index].id) {
				this.deleteCraft(this.tableData[index].id);
			} else {
				this.tableData.splice(index, 1)
			}
		}

	},
	created() {
		this.styleId = CommonUtils.getParam(this, 'styleId', 'setStyleId');
		this.getAllCraft();
	}

};
</script>
<style lang="scss" scoped>
.style-craft {
	color: #444444;
	font-size: 18px;
	padding-right: 20px;
	height: calc(100vh - 100px);
	// overflow: scroll;
	scrollbar-width: none;
	/* firefox */
	-ms-overflow-style: none;
	/* IE 10+ */
	overflow-x: hidden;
	overflow-y: auto;

	>div {
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-top: 20px;
		background-color: #ffffff;
		padding: 20px;
		border-radius: 5px;
	}

	>div:nth-of-type(1) {

		>label:nth-of-type(1) {
			font-weight: 600;
		}

		>div:nth-of-type(1) {
			width: 1px;
			background-color: #cccccc;
			margin: 0px 20px;
		}

		>button:nth-of-type(1) {
			background-image: url(../../assets/img/customer-1.png);
			background-repeat: no-repeat;
			background-size: 100% 100%;
			padding: 5px 10px;
			border: 0px;
			display: flex;
			color: #ffffff;
			flex-direction: row;
			align-items: center;
			font-weight: 800;

			>img {
				margin-right: 7px;
				width: 15px;
				height: 15px;
				content: url(../../assets/img/customer-2.png);
			}

		}
	}

	>div:nth-of-type(2) {
		flex-direction: column;
		align-items: flex-start;

		>div:nth-of-type(1) {
			width: 100%;
			display: flex;
			justify-content: space-between;

		}

		.table {
			width: 100%;
			margin-top: 20px;

			.input {
				width: 60%;
			}
		}

		.btn-save {
			margin-top: 50px;
			width: 200px;
			margin-left: 0px;
		}




	}

}
</style>
